<template>
  <div class="manage_1">
    <el-table
      :data="orderList[pageIndex-1]"
      style="width: 100%"
      :row-class-name="clickProduction"
      :header-cell-style="getRowClass"
      @row-click="clickRow"
      @selection-change="selectRow"
      size="small">
      <el-table-column
        type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="production_detail">
            <el-form-item label="商品总价">
              <span >{{props.row.total_price}}</span>
            </el-form-item>
            <el-form-item label="下单时间">
              <span>{{props.row.add_time}}</span>
            </el-form-item>
            <el-form-item label="推广人">
              <span>{{props.row.nickname}}</span>
            </el-form-item>
            <el-form-item label="用户备注">
              <span>{{props.row.remark?props.row.remark:'无'}}</span>
            </el-form-item>
            <el-form-item label="商家备注">
              <span>{{props.row.invoice?props.row.invoice:'无'}}</span>
            </el-form-item>
            <el-form-item label="核销码">
              <span>{{props.row.verify_code?props.row.verify_code:'无'}}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="订单号 | 类型"
        width="180">
        <template slot-scope="scope">
          <p>{{scope.row.order_id}}</p>
          <p>{{scope.row.pink_name}}</p>
          <p style="color: #f00;">{{scope.row.is_del===0?'':'用户已删除'}}</p>
        </template>
      </el-table-column>
      <el-table-column
        label="用户昵称 | ID"
        width="180">
        <template slot-scope="scope">
          <p>
            <span>{{scope.row.nickname}}</span>
            |
            <span style="color: #2d8cf0;">{{scope.row.pay_uid}}</span>
          </p>
        </template>
      </el-table-column>
      <el-table-column
        label="商品信息"
        width="340">
        <template slot-scope="scope">
          <div class="pro_info">
            <div class="imgList">
              <viewer :images="scope.row.cart_info.productInfo.slider_image">
                <img v-for="(item,index) in scope.row.cart_info.productInfo.slider_image" :key="index" v-show="index===0" :src="item" alt="">
              </viewer>
            </div>
            <div class="info">
              <p>{{scope.row.cart_info.productInfo.store_name}}</p>
            </div>
            <div class="price">
              <p>￥{{scope.row.cart_info.productInfo.price}} x {{scope.row.cart_info.cart_num}}</p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="pay_price"
        label="实际支付">
        <template slot-scope="scope">
          <p>￥{{scope.row.pay_price}}</p>
        </template>
      </el-table-column>
      <el-table-column
        prop="pay_type_name"
        label="支付状态">
      </el-table-column>
      <el-table-column
        prop="_pay_time"
        label="支付时间">
      </el-table-column>
      <el-table-column
        label="订单状态">
        <template slot-scope="scope">
          <p>{{scope.row.status_name.status_name}}</p>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button v-if="scope.row._status===1" @click="editOrder(scope.row)" type="text" size="small">编辑</el-button>
          <el-button v-if="scope.row._status===2" @click="sendOrder(scope.row)" type="text" size="small">发送货</el-button>
          <el-button v-if="scope.row._status===4" @click="handleClick(scope.row)" type="text" size="small">配送信息</el-button>
          <el-popover
            placement="bottom-end"
            width="120"
            trigger="hover">
            <div class="more_box" >
              <ul>
                <li
                  v-for="(item,index) in handleList"
                  :key="index">
                  <span>{{item.title}}</span>
                </li>
              </ul>
            </div>
            <el-button slot="reference" @click="handleClick(scope.row)" type="text" size="small">
              更多
              <i class="el-icon-arrow-down"></i>
            </el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <Page :total="total" @on-change="changePage" show-elevator></Page>
    </div>
    <aside>
      <Modal v-model="editOrderDialog" title="修改订单">
        <Form :model="editValidate" :rules="rules" :label-width="100">
          <Form-item label="订单编号" prop="orderNumber">
            <Input v-model="editValidate.orderNumber" placeholder="请填写订单编号" disabled></Input>
          </Form-item>
          <Form-item label="商品总价" prop="totalPrice">
            <Input-number :min="0" v-model="editValidate.totalPrice" disabled></Input-number>
          </Form-item>
          <Form-item label="支付邮费" prop="postage">
            <Input-number :min="0" v-model="editValidate.postage" disabled></Input-number>
          </Form-item>
          <Form-item label="实际支付金额" prop="actualPay">
            <Input-number :min="0" v-model="editValidate.actualPay"></Input-number>
          </Form-item>
          <Form-item label="赠送积分" prop="presentExp">
            <Input-number :min="0" v-model="editValidate.presentExp"></Input-number>
          </Form-item>
        </Form>
        <div slot="footer">
          <Button type="primary" icon="ios-cloud-upload-outline" long @click="confirmEdit">提交</Button>
        </div>
      </Modal>
      <Modal v-model="sendDialog" title="订单发送货" width="800">
        <Form :model="sendValidate" :rules="rules" :label-width="100">
          <Form-item label="选择类型" prop="type">
            <Radio-group v-model="sendValidate.type" @on-change="clearSelected(1)">
              <Radio v-for="item in types" :key="item.value" :label="item.title"></Radio>
            </Radio-group>
          </Form-item>
          <Form-item label="发货类型" prop="sendType" v-if="sendValidate.type==='发货'">
            <Radio-group v-model="sendValidate.sendType" @on-change="clearSelected(2)">
              <Radio v-for="item in sendTypes" :key="item.value" :label="item.title"></Radio>
            </Radio-group>
          </Form-item>
          <Form-item label="快递公司" prop="orderNumber" v-if="sendValidate.type==='发货'">
            <Select v-model="sendValidate.expressFirm">
              <Option v-for="item in firmList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Form-item>
          <Form-item label="电子面单" prop="electronicBilling" v-if="sendValidate.type==='发货' && sendValidate.sendType==='电子面单打印'">
            <Select v-model="sendValidate.electronicBilling">
              <Option v-for="item in billingList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            <div
              class="div_btn"
              v-show="sendValidate.electronicBilling && sendValidate.electronicBilling>=0"
              @click="checkBilling">
              <span>预览</span>
              <viewer :images="sendValidate.picPath">
                <div class="img" v-for="(item,index) in sendValidate.picPath" :key="index" v-show="index===0">
                  <img :src="item" alt="">
                </div>
              </viewer>
            </div>
          </Form-item>
          <Form-item label="快递单号" prop="orderNumber" v-if="sendValidate.type==='发货' && sendValidate.sendType==='手动填写'">
            <Input v-model="sendValidate.expressNumber" placeholder="请填写快递单号"></Input>
          </Form-item>
          <Form-item label="寄件人姓名" prop="name" v-if="sendValidate.type==='发货' && sendValidate.sendType==='电子面单打印'">
            <Input v-model="sendValidate.name" placeholder="请填写寄件人姓名"></Input>
          </Form-item>
          <Form-item label="寄件人电话" prop="phone" v-if="sendValidate.type==='发货' && sendValidate.sendType==='电子面单打印'">
            <Input v-model="sendValidate.phone" placeholder="请填写寄件人电话"></Input>
          </Form-item>
          <Form-item label="寄件人地址" prop="address" v-if="sendValidate.type==='发货' && sendValidate.sendType==='电子面单打印'">
            <Input v-model="sendValidate.address" placeholder="请填写寄件人地址"></Input>
          </Form-item>
          <Form-item label="送货人" prop="deliveryman" v-if="sendValidate.type==='送货'">
            <Select v-model="sendValidate.deliveryman">
              <Option v-for="item in deliverymanList" :value="item.value" :key="item.value">{{item.name}}({{item.phone}})</Option>
            </Select>
          </Form-item>
          <Form-item label="备注" prop="remark" v-if="sendValidate.type==='无需配送'">
            <Input v-model="sendValidate.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="备注..."></Input>
          </Form-item>
        </Form>
        <div slot="footer">
          <Button @click="cancelSend">取消</Button>
          <Button type="primary" @click="confirmSend">提交</Button>
        </div>
      </Modal>
    </aside>
  </div>
</template>

<script>
  import totalOrder from '../../../apiData/orderList/all.js'
  import firmList from '../../../apiData/firmList.js'
  import billings from '../../../apiData/billingList.js'
  import deliverymanList from '../../../apiData/deliverymanList.js'
  export default {
    name: "manage_1",
    props: {
      name: {
        type: String
      }
    },
    data() {
      return {
        loading: false,
        orderList: [],
        pageIndex: 1,
        total: 0,
        rowIndex: null,
        handleList: [
          { value: 0, title: '订单详情' },
          { value: 1, title: '订单记录' },
          { value: 2, title: '小票打印' },
          { value: 3, title: '订单备注' },
          { value: 4, title: '已收货' },
          { value: 5, title: '删除订单' }
        ],
        selectedRow: [],  // 选中的订单
        editOrderDialog: false,  // 修改订单对话框
        modal_loading: false,
        sendDialog: false,  // 发货订单对话框
        editValidate: {
          orderNumber: '',
          totalPrice: 0,
          postage: 0,
          actualPay: 0,
          presentExp: 0,
        },
        // 选择类型列表
        types: [
          { id: 0, title: '发货' },
          { id: 1, title: '送货' },
          { id: 2, title: '无需配送' }
        ],
        // 发货类型列表
        sendTypes: [
          { id: 0, title: '手动填写' },
          { id: 1, title: '电子面单打印' }
        ],
        firmList: [],  // 快递公司列表
        billingList: [],  // 电子单据列表
        deliverymanList: [],  // 送货人列表
        sendValidate: {
          type: '发货',  // 选择类型
          sendType: '手动填写',  // 发货类型
          expressFirm: null,  // 快递公司value
          expressNumber: '',  // 快递单号
          electronicBilling: null,  // 电子面单value
          picPaths: [],  //  电子面单图片地址
          name: '',  // 寄件人姓名
          phone: '',  // 寄件人电话
          address: '',  // 寄件人地址
          deliveryman: null, // 送货人value
          remark: '',  // 备注
        },
        rules: {

        }
      }
    },
    watch: {
      pageIndex: {
        handler(val, oldVal) {
          this.loading = true;
          let timer = setTimeout(() => {
            this.loading = false;
            clearTimeout(timer);
          },1500)
        },
        immediate: true
      },
      // 监听快递公司，获取电子面单列表
      'sendValidate.expressFirm': {
        handler(val, oldVal) {
          let flag = this.sendValidate.type==='发货' && this.sendValidate.sendType==='电子面单打印';
          if(val>=0 && flag) {
            this.billingList = billings
          }else{
            this.billingList = []
          }
        }
      },
      // 监听电子面单，获取电子面单图片地址
      'sendValidate.electronicBilling': {
        handler(val, oldVal) {
          let cd = this.billingList.filter(item => item.value===val)[0];
          let picPath = cd.picPath;
          this.sendValidate.picPath = [];
          this.sendValidate.picPath.push(picPath);
        }
      },
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        this.orderList = totalOrder.list;
        this.total = totalOrder.count;
        this.firmList = firmList;
        this.deliverymanList = deliverymanList;
      },
      clickProduction({row, rowIndex}) {
        if (rowIndex === this.rowIndex) {
          return 'active-row';
        }
        return '';
      },
      //改变table表头背景和字体颜色
      getRowClass ({ row, column, rowIndex, columnIndex }) {
        return 'background:transparent;'
      },
      clickRow(row) {
        let rowIndex = this.orderList.indexOf(row);
        this.rowIndex = rowIndex;
      },
      selectRow(e) {
        this.selectedRow = e;
        this.$emit('saveSelectedOrder', e)
      },
      changePage(e) {
        this.pageIndex = e
      },
      // 编辑订单
      editOrder(order) {
        this.$Notice.warning({ title: '修改订单' });
        this.editOrderDialog = true;
        console.log(order);
        this.editValidate = {
          orderNumber: order.order_id,
          totalPrice: Number(order.cart_info.productInfo.price),
          postage: Number(order.total_postage),
          actualPay: Number(order.pay_price),
          presentExp: 0,
        }
      },
      // 确认编辑
      confirmEdit() {
        this.editOrderDialog = false
      },
      // 订单发送货
      sendOrder(order) {
        this.sendDialog = true
      },
      // 清空已选
      clearSelected(num) {
        this.sendValidate.expressFirm = null;
        this.sendValidate.expressNumber = '';
        this.sendValidate.picPaths = [];
        this.sendValidate.name = '';
        this.sendValidate.phone = '';
        this.sendValidate.address = '';
        this.sendValidate.deliveryman = null;
        this.sendValidate.remark = '';
        if(num===1) {
          this.sendValidate.sendType = '手动填写';
        }else{}
      },
      // 预览电子面单
      checkBilling() {

      },
      // 取消  发货信息
      cancelSend() {
        this.sendDialog = false
      },
      // 确认  发货信息
      confirmSend() {
        this.sendDialog = false
      }
    }
  }
</script>

<style>

</style>
<style scoped lang="scss">
  @import "../../../style/element.scss";
  .manage_1 {
    /deep/ .el-table{
      th,td{
        text-align: center;
      }
      .pro_info{
        display: flex;
        align-items: center;
        .imgList{
          width: 40px;
          height: 40px;
          margin-right: 8px;
          img{
            width: 100%;
            height: 100%;
            cursor: pointer;
          }
        }
        .info{
          width: calc(100% - 48px - 80px);
          text-align: left;
        }
        .price{
          width: 80px;

        }
      }
      .img{
        img{
          max-width: 50px;
          max-height: 50px;
          cursor: pointer;
        }
      }
      .active-row{
        background: #ebf7ff;
      }
      .hover-row{
        background: #ebf7ff !important;
      }
    }
    /deep/ .el-form{
      padding: 0 20px 0 90px;
      background: #f9f9f9;
      border-radius: 4px;
      .el-form-item{
        width: 30%;
        padding-left: 20px;
        margin-bottom: 10px;
        text-align: left;
      }
    }
    .el-button{
      margin-right: 10px;
    }
    .page{
      /*border: 1px solid red;*/
      padding: 16px;
      display: flex;
      justify-content: right;
    }
  }
</style>
<style lang="scss" scoped>
  .more_box{
    ul{
      li{
        cursor: pointer;
        line-height: 30px;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        span{
          margin-left: 4px;
        }
      }
      li:hover{
        background: #f5f5f5;
      }
    }
  }
  .ivu-modal{
    .ivu-select,
    .ivu-input-wrapper{
      width: 540px;
    }
    .div_btn{
      display: inline-block;
      /*border: 1px solid red;*/
      height: 34px;
      width: 60px;
      line-height: 34px;
      position: relative;
      .img{
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 100;
        opacity: 0;
        top: 0;
        left: 0;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>
